<template>
  <div 
    class="axiom-swipe-card"
    :class="{ 'is-swiping': isSwipeActive || isDragStarted }"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
    @mouseleave="handleMouseLeave"
    @click="handleClick"
  >
    <!-- 主卡片内容区域 - 直接使用CCard组件 -->
    <div 
      class="swipe-card-content"
      :style="{ transform: `translateX(${translateX}px)` }"
    >
      <AxiomCard v-bind="cardProps">
        <!-- 传递所有插槽到AxiomCard，除了swipe-actions -->
        <template v-for="(slot, slotName) in $slots" #[slotName]>
          <slot :name="slotName"></slot>
        </template>
      </AxiomCard>
    </div>
    
    <!-- 滑动后显示的操作区域 -->
    <div 
      v-if="hasSwipeActions" 
      class="swipe-card-actions" 
      :class="{ 'visible': isSwipeActive }"
    >
      <div class="action-buttons">
        <slot name="swipe-actions">
          <!-- 默认操作按钮 -->
          <button 
            v-if="editable"
            class="action-btn edit-btn" 
            @click.stop="handleEdit"
          >
            <AxiomIcon name="Edit" />
            <span>编辑</span>
          </button>
          <button 
            v-if="deletable"
            class="action-btn delete-btn" 
            @click.stop="handleDelete"
          >
            <AxiomIcon name="Delete" />
            <span>删除</span>
          </button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, useSlots } from 'vue';
import AxiomCard from '../common/AxiomCard.vue';
import AxiomIcon from '../common/AxiomIcon.vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

const slots = useSlots();

const props = defineProps({
  editable: { type: Boolean, default: false },
  deletable: { type: Boolean, default: false },
  swipeThreshold: { type: Number, default: 40 },
  actionWidth: { type: Number, default: 120 },
});

const emits = defineEmits(['click', 'edit', 'delete']);

const translateX = ref(0);
const isSwipeActive = ref(false);
const isDragging = ref(false);
const isDragStarted = ref(false);
const startX = ref(0);
const startTranslateX = ref(0);

const cardProps = computed(() => {
  const { editable, deletable, swipeThreshold, actionWidth, ...otherProps } = props;
  return otherProps;
});

const availableSlots = computed(() => {
  return Object.keys(slots).filter(slotName => slotName !== 'swipe-actions');
});

const hasSwipeActions = computed(() => {
  return props.editable || props.deletable || slots['swipe-actions'];
});

const getActionWidth = () => {
  if (typeof window !== 'undefined' && window.innerWidth <= 480) {
    return 100;
  }
  return props.actionWidth;
};

const handleTouchStart = (e) => {
  if (!hasSwipeActions.value) return;
  isDragging.value = true;
  isDragStarted.value = true;
  startX.value = e.touches[0].clientX;
  startTranslateX.value = translateX.value;
};

const handleTouchMove = (e) => {
  if (!isDragging.value || !hasSwipeActions.value) return;
  const currentX = e.touches[0].clientX;
  const deltaX = currentX - startX.value;
  if (Math.abs(deltaX) > 10) {
    e.preventDefault();
  }
  const newTranslateX = startTranslateX.value + deltaX;
  if (newTranslateX <= 0) {
    translateX.value = Math.max(newTranslateX, -getActionWidth());
  }
};

const handleTouchEnd = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  isDragStarted.value = false;
  if (Math.abs(translateX.value) > props.swipeThreshold) {
    translateX.value = -getActionWidth();
    isSwipeActive.value = true;
  } else {
    translateX.value = 0;
    isSwipeActive.value = false;
  }
};

const handleMouseDown = (e) => {
  if (!hasSwipeActions.value) return;
  isDragging.value = true;
  isDragStarted.value = true;
  startX.value = e.clientX;
  startTranslateX.value = translateX.value;
  e.preventDefault();
};

const handleMouseMove = (e) => {
  if (!isDragging.value) return;
  const newTranslateX = startTranslateX.value + (e.clientX - startX.value);
  if (newTranslateX <= 0) {
    translateX.value = Math.max(newTranslateX, -getActionWidth());
  }
};

const handleMouseUp = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  isDragStarted.value = false;
  if (Math.abs(translateX.value) > props.swipeThreshold) {
    translateX.value = -getActionWidth();
    isSwipeActive.value = true;
  } else {
    translateX.value = 0;
    isSwipeActive.value = false;
  }
};

const handleMouseLeave = () => {
  if (isDragging.value) {
    handleMouseUp();
  }
};

const handleClick = (event) => {
  if (isSwipeActive.value) {
    // this.logger.debug('滑动卡片收起操作');
    resetSwipe();
  } else if (!isDragging.value) {
    // this.logger.debug('滑动卡片点击');
    emits('click', event);
  }
};

const handleEdit = () => {
  // this.logger.debug('滑动卡片编辑操作');
  emits('edit');
  resetSwipe();
};

const handleDelete = () => {
  // this.logger.debug('滑动卡片删除操作');
  emits('delete');
  resetSwipe();
};

const resetSwipe = () => {
  translateX.value = 0;
  isSwipeActive.value = false;
};

</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-swipe-card';
</style> 